<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleEdit('create')">{{$t('table.add')}}</el-button>
    </div>

    <div class="tab-container">
      <el-tabs v-model="activeName" type="border-card" @tab-click="getList">
        <el-tab-pane v-for="item in typeOptions" :label="item.label" :key="item.value" :name="item.label">
          <keep-alive>
            <!-- <tab-pane v-if="activeName==item.key" :type="item.key"/> -->

              <el-table
                v-loading="listLoading"
                :key="tableKey"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
                >
                <el-table-column :label="$t('table.id')" prop="id" sortable="id" align="center" width="65">
                  <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('table.title')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('table.image')" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.image" />
                  </template>
                </el-table-column>
                <el-table-column :label="$t('tournament.entry_fee')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.entry_fee }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('tournament.type')" align="center">
                  <template slot-scope="scope">
                    <template v-for="(item,key) in typeOptions">
                      <span v-if="item.value==scope.row.type">{{ item.label }}</span>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('tournament.start_time')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.start_time }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('tournament.end_time')" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.end_time }}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('tournament.status')" align="center">
                  <template slot-scope="scope">
                    <template v-for="(item,key) in statusOptions">
                      <span v-if="item.value==scope.row.status">
                        <el-tag :type="scope.row.status==0?'info':'success'">
                          {{ item.label }}
                        </el-tag>
                      </span>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('table.actions')" align="center" width="200">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit('update', scope.row)">{{ $t('table.edit') }}</el-button>
                    <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />


          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 85%; margin-left:50px;">
        <el-form-item :label="$t('table.title')" prop="title">
          <el-input v-model="temp.title"/>
        </el-form-item>
        <el-form-item :label="$t('table.image')" prop="image">
          <dropzone id="myVueDropzone" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
        </el-form-item>
        <el-form-item :label="$t('tournament.entry_fee')" prop="entry_fee">
          <el-input v-model="temp.entry_fee"/>
        </el-form-item>
        <el-form-item :label="$t('tournament.type')" prop="type">
          <el-select v-model="temp.type" :selected="temp.type" class="filter-item" placeholder="Please select">
            <el-option v-for="item in typeOptions" :key="item.key" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('tournament.start_time')" prop="start_time">
          <el-input v-model="temp.start_time"/>
        </el-form-item>
        <el-form-item :label="$t('tournament.end_time')" prop="end_time">
          <el-input v-model="temp.end_time"/>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="editData">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>


</div>
</template>

<script>

import { fetchList } from '@/api/tournament'
import waves from '@/directive/waves' 
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Dropzone from '@/components/Dropzone'

export default {
  components: { Pagination,Dropzone },
  directives: { waves },
  data() {
    return {
      resource:'tournaments',

      //tab
      activeName:'All',
      typeOptions:[
      {label :'All',value:0},
      {label :'Day',value:1},
      {label :'Month',value:2},
      {label :'Year',value:3} 
      ],
      statusOptions:[
      {label :'Wait',value:0},
      {label :'Processing',value:1},
      ],

       //list data
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        sort: '-id',
        type:0
      },


      //edit data
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit Tournament',
        create: 'Add Tournament'
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
      getList() {
        helper.setTabQuery(this.typeOptions,'type',this)

        helper.getList(fetchList,this);
      },
      getDefaultTemp() {
        return {
          id: undefined,
          title: '',
          image: '',
          entry_fee:0,
          start_time:0,
          end_time:0,
          status:0
        };
      },
      handleEdit(type,row){
        helper.handleEdit(type, row, this);
      },
      handleDelete(row){
        helper.handleDelete(this.resource, row ,this);
      },
      editData(){
        helper.updateResource(this.resource,this.temp,this)
      },
      dropzoneS(response) {
        this.temp.image=response.result.image
        this.$message({ message: 'Upload success', type: 'success' })
      },
      dropzoneR(file) {
        this.$message({ message: 'Delete success', type: 'success' })
      },
      sortChange(data) {
        helper.handleSortChange(data,this)
      }
  },
}
</script>
